<template>
    <div class="main-layout">
        <main>
            <slot/>
        </main>
        <footer>
            <div @click="toPageRoute(item)" :class="['item', item.active ? 'active' : '']" v-for="item in footerList" :key="item.name">
                <i :class="[item.icon]"></i>
                <span>{{item.name}}</span>
            </div>
        </footer>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                //页脚展示数据
                footerList:[
                    {'icon':'home',name:'首页',active:false,path:'/home'},
                    {'icon':'goodsClass',name:'分类',active:false,path:'/goodsClass'},
                    {'icon':'technician',name:'技师',active:false,path:'/technician'},
                    {'icon':'goodsCart',name:'购物车',active:false,path:'/goodsCart'},
                    {'icon':'my',name:'我的',active:false,path:'/my'},
                ],
            }
        },

        //实时监听路由
        watch:{
            "$route.path":{
                immediate:true,
                handler(_path){
                    this.footerList=this.footerList.map(item=>{
                        item.active=item.path===_path
                        return item
                    })
                }
            }
        },

        methods: {
            toPageRoute(item){
                if(item.path===this.$route.path){
                    return
                }
                this.$router.push(item.path)
            }
        },
    }
</script>

<style lang="less" scoped>
    // 定义一个名字数组
    @icons: home goodsClass technician goodsCart my;
    // length(@icons) 获取数组的长度
    .loop(@index: 1) when (@index <= length(@icons)) {
        // 获取数组的值，需要调用一个extract方法
        @icon: extract(@icons, @index);
        > i {
            &.@{icon} {
                background-image: url("../images/footerIcon/@{icon}.png");
            }
        }
        &.active {
            > i {
                &.@{icon} {
                    background-image: url("../images/footerIcon/@{icon}-choose.png");
                }
            }
        }
        .loop(@index + 1);
    }
    .main-layout {
        display: block;
        height: 100%;
        > main {
            background-color: #f7f7f7;
            height: calc(100% - 50px);
            // 当设置横向滚动为关闭的时候，不设置纵向，那么纵向就是自动滚动的
            overflow-x: hidden;
        }
        > footer {
            display: block;
            height: 49px;
            border-top: solid 1px #eeeeee;
            background: #fff;
            > .item {
                float: left;
                width: 20%;
                > i {
                    display: block;
                    height: 34px;
                    background-position: center bottom;
                    background-size: 24px;
                    background-repeat: no-repeat;
                }
                > span {
                    display: block;
                    height: 16px;
                    text-align: center;
                    font-size: .6rem;
                    color: #CDCDCD;
                }
                .loop();
                &.active {
                    > span {
                        color: #FCE1DA;
                    }
                }
            }
            //清除浮动
            &::after{
                content: "";
                display: block;
                width: 0;
                height: 0;
                clear: both;
            }
        }
    }
</style>